import { getQuestionListApi } from "@/api";
import React, { useEffect, useState, TouchEvent } from "react";
import { useLocation } from "react-router-dom";
import Choice from "./components/Choice";
import Fill from "./components/Fill";
import "./index.less";
import AppsIcon from "@mui/icons-material/Apps";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

// 选择题目的类型
const ChoiceTypes = ["one", "check", "many"];

export default function Practice() {
  // 获取从上面页面通过state传递过来的数据
  const { state } = useLocation();
  // 题目列表
  const [list, setList] = useState<IQuestionType[]>([]);
  const params = state as IQuetionListParams;
  useEffect(() => {
    getQuestionListApi(params).then((res) => {
      if (res.errCode === 0) {
        setList(res.data);
      }
    });
  }, []);

  const [curIndex, setCurIndex] = useState(0);
  // 滑动切换题目
  // 移动端，事件都使用 手指触摸操作 touch 事件
  // touchstart  touchmove  touchend
  // 思路： 在手指 开始触摸的时候，记录下当前的位置
  // 在手指结束触摸的时候，记录对应的位置
  // 比较： 开始的位置比结束的位置小 ， 手指是从左向右移动 ， 是切换到上一题
  let startX = 0;
  const touchStart = (e: TouchEvent<HTMLDivElement>) => {
    // 获取 手指的触摸点
    startX = e.touches[0].clientX;
  };
  const touchEnd = (e: TouchEvent<HTMLDivElement>) => {
    let endX = e.changedTouches[0].clientX;
    // 防止移动的距离过小
    if (Math.abs(endX - startX) < 50) return;
    if (startX < endX) {
      if (curIndex == 0) return;
      setCurIndex(curIndex - 1);
    } else {
      if (curIndex === list.length - 1) return;
      setCurIndex(curIndex + 1);
    }
  };

  return (
    <div className="practice">
      <div className="top-tip">
        <p>
          <AppsIcon />
          <span>
            {curIndex + 1} / {list.length}
          </span>
        </p>
      </div>
      {/* {list.map((item) => {
        // 如果是选择题，渲染选择组件
        if (ChoiceTypes.includes(item.questionType)) {
          return <Choice />;
        }
        // 否则渲染 填空组件
        else {
          return <Fill />;
        }
      })} */}
      {/* <div
        className="question-list"
        onTouchStart={touchStart}
        // onTouchMove={() => console.log("触摸移动")}
        onTouchEnd={touchEnd}
      >
        <div
          className="qs-wraper"
          style={{
            width: list.length * 100 + "vw",
            transform: `translateX(${curIndex * -100}vw)`,
          }}
        >
          {list.map((item) =>
            ChoiceTypes.includes(item.questionType) ? (
              <Choice data={item} key={item.id} />
            ) : (
              <Fill key={item.id} />
            )
          )}
        </div>
      </div> */}

      <Swiper
        slidesPerView={1}
        onSlideChange={(swiper) => setCurIndex(swiper.activeIndex)}
      >
        {list.map((item) => (
          <SwiperSlide key={item.id}>
            {ChoiceTypes.includes(item.questionType) ? (
              <Choice data={item} />
            ) : (
              <Fill data={item} />
            )}
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}
